<template>
    <div>
        <Modal v-model="data.isShow" :mask-closable="false" width="360">
			<p slot="header" class="header-view">修改密码</p>
			<div class="main-view">
                <Form ref="formInline" :model="data.data" :rules="ruleInline" :label-width="80">
                    <FormItem label="旧密码" prop="password">
                        <Input type="password" v-model="data.data.password" placeholder="请输入旧密码" class="input"></Input>
                    </FormItem>
                    <FormItem label="新密码" prop="newPassword">
                        <Input type="password" v-model="data.data.newPassword" placeholder="请输入新密码" class="input"></Input>
                    </FormItem>
                    <FormItem label="确认密码" prop="submitPassword">
                        <Input type="password" v-model="data.data.submitPassword" placeholder="请输入确认密码" class="input"></Input>
                    </FormItem>
                </Form>
			</div>
            <div slot="footer">
				<Button type="primary" @click="clickSubmit">确定</Button>
				<Button @click="data.isShow = false">取消</Button>
			</div>
		</Modal>
    </div>
</template>

<script>
    var $this = null;
    var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== $this.data.data.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
    };
    export default {
        props: ['data'],
        data() {
            return {
                ruleInline: {
                    password: [
                        { required: true, message: '请输入旧密码', trigger: 'blur' }
                    ],
                    newPassword: [
                        { required: true, message: '请输入新密码', trigger: 'blur' }
                    ],
                    submitPassword: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
                        { validator: validatePass2, message: '新密码与确认密码不一致', trigger: 'blur' }
                    ]
                }
            }
        },
        mounted() {
            $this = this;
        },
        methods: {
            clickSubmit() {
                this.$refs['formInline'].validate((valid) => {
                    if (valid) {
                        this.$emit('on-submit', this.data);
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
.header-view {
    text-align: center;
}
.main-view {
    text-align: center;
    .input {
        border: .01rem solid #D5CED2;
        border-radius: 5px;
        color: #433e41;
    }
}
</style>